<h1 mat-dialog-title>{{ application.displayName }}</h1>
<mat-dialog-content>
<mat-tab-group>
  <mat-tab label="Overview">
<mat-card>
      <table class="userTable">
        <tr><th>Display name</th><td>{{ application.displayName }}</td></tr>
        <tr><th>ObjectId</th><td>{{ application.objectId }}</td></tr>
        <tr><th>Application ID</th><td>{{ application.appId }}</td></tr>
        <tr><th>Publisher</th><td>{{ application.publisherName }}</td></tr>
        <tr><th>Homepage</th><td>{{ application.homepage }}</td></tr>
        <tr><th>Service Principal</th><td><a [routerLink]="['/serviceprincipals-by-appid/', application.appId]">{{ application.displayName }}</a></td></tr>
        <tr *ngIf="showPortalLink"><th>Manage in Entra portal</th><td><a target="_blank" href="https://entra.microsoft.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Overview/appId/{{ application.appId }}/isMSAApp~/false"><mat-icon>open_in_new</mat-icon></a></td></tr>
        <tr><th>Reply Urls</th><td>
          <mat-list>
            <mat-list-item *ngFor="let url of application.replyUrls"> {{ url }} </mat-list-item>
          </mat-list></td></tr>
      </table>
    </mat-card>
    <mat-divider></mat-divider>
    <mat-expansion-panel *ngIf="application.ownerUsers.length > 0"  expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Owners ({{ application.ownerUsers.length }})
        </mat-panel-title>
      </mat-expansion-panel-header>

      <table mat-table [dataSource]="application.ownerUsers" class="full-width-table">
        <ng-container matColumnDef="displayName">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td mat-cell *matCellDef="let row"><a [routerLink]="['/users/', row.objectId]">{{row.displayName}}</a></td>
        </ng-container>

        <ng-container matColumnDef="userPrincipalName">
          <th mat-header-cell *matHeaderCellDef>userPrincipalName</th>
          <td mat-cell *matCellDef="let row">{{row.userPrincipalName}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumnsOwners"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsOwners;"></tr>
      </table>
    </mat-expansion-panel>
    </mat-tab>
  <mat-tab label="Defined permissons" *ngIf="application.appRoles.length > 0 || application.oauth2Permissions.length > 0">
    <h2 *ngIf="application.appRoles.length > 0">Application roles (application permissions)</h2>
    <table *ngIf="application.appRoles.length > 0" mat-table [dataSource]="application.appRoles">
      <ng-container matColumnDef="displayName">
        <th mat-header-cell *matHeaderCellDef>displayName</th>
        <td mat-cell *matCellDef="let row">{{row.displayName}}</td>
      </ng-container>
      <ng-container matColumnDef="allowedMemberTypes">
        <th mat-header-cell *matHeaderCellDef>Allowed types</th>
        <td mat-cell *matCellDef="let row"><span *ngFor="let mtype of row.allowedMemberTypes">{{mtype}} </span></td>
      </ng-container>
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>Description</th>
        <td mat-cell *matCellDef="let row">{{row.description}}</td>
      </ng-container>
      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef>Value</th>
        <td mat-cell *matCellDef="let row">{{row.value}}</td>
      </ng-container>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let row">{{row.id}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumnsAppRoles"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsAppRoles;"></tr>
    </table>
    <h2 *ngIf="application.oauth2Permissions.length > 0">OAuth2 permissions (delegated permissions)</h2>
    <table *ngIf="application.oauth2Permissions.length > 0" mat-table [dataSource]="application.oauth2Permissions">
      <ng-container matColumnDef="userConsentDisplayName">
        <th mat-header-cell *matHeaderCellDef>User Consent Name</th>
        <td mat-cell *matCellDef="let row">{{row.userConsentDisplayName}}</td>
      </ng-container>
      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>Allowed types</th>
        <td mat-cell *matCellDef="let row">{{row.type}}</td>
      </ng-container>
      <ng-container matColumnDef="userConsentDescription">
        <th mat-header-cell *matHeaderCellDef>User Consent Description</th>
        <td mat-cell *matCellDef="let row">{{row.userConsentDescription}}</td>
      </ng-container>
      <ng-container matColumnDef="adminConsentDisplayName">
        <th mat-header-cell *matHeaderCellDef>Admin Consent Name</th>
        <td mat-cell *matCellDef="let row">{{row.adminConsentDisplayName}}</td>
      </ng-container>
      <ng-container matColumnDef="adminConsentDescription">
        <th mat-header-cell *matHeaderCellDef>Admin Consent Description</th>
        <td mat-cell *matCellDef="let row">{{row.adminConsentDescription}}</td>
      </ng-container>
      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef>Value</th>
        <td mat-cell *matCellDef="let row">{{row.value}}</td>
      </ng-container>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let row">{{row.id}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumnsOAuth2"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsOAuth2;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="Metadata" *ngIf="metadata.length > 0">
    <table class="userTable">
        <tr *ngFor="let data of metadata">
          <th>{{ data.key }}</th>
          <td>
            <p appJsonFormat [json]="data.value" *ngIf="data.isJSON"></p>
            <pre *ngIf="!data.isJSON">{{ data.value }}</pre>
          </td>
        </tr>
      </table>

  </mat-tab>
  <mat-tab label="Raw"><p appJsonFormat [json]="application"></p> </mat-tab>
</mat-tab-group>
</mat-dialog-content>

